<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>售后申请入口</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.apply-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.service-cards {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			gap: 25px;
			margin-bottom: 30px;
		}
		.service-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
			cursor: pointer;
		}
		.service-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		}
		.card-header {
			padding: 25px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			text-align: center;
		}
		.card-icon {
			font-size: 48px;
			margin-bottom: 15px;
			display: block;
		}
		.card-title {
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 8px;
		}
		.card-desc {
			font-size: 14px;
			opacity: 0.9;
			line-height: 1.4;
		}
		.card-content {
			padding: 25px;
		}
		.service-features {
			list-style: none;
			padding: 0;
			margin: 0 0 20px 0;
		}
		.service-features li {
			padding: 8px 0;
			display: flex;
			align-items: center;
			gap: 8px;
			color: #666;
			font-size: 14px;
		}
		.service-features li i {
			color: #67c23a;
			font-size: 16px;
		}
		.quick-apply {
			background: #f8f9fa;
			border-radius: 8px;
			padding: 15px;
			margin-bottom: 15px;
		}
		.quick-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 10px;
		}
		.quick-options {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
		}
		.quick-option {
			padding: 4px 8px;
			background: #fff;
			border: 1px solid #e9ecef;
			border-radius: 4px;
			font-size: 12px;
			color: #666;
			cursor: pointer;
			transition: all 0.2s;
		}
		.quick-option:hover {
			border-color: #409eff;
			color: #409eff;
		}
		.statistics-panel {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			margin-bottom: 25px;
		}
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 20px;
		}
		.stat-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.stat-label {
			font-size: 14px;
			opacity: 0.9;
		}
		.recent-orders {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			margin-bottom: 25px;
		}
		.section-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.order-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
			border: 1px solid #e9ecef;
			border-radius: 8px;
			margin-bottom: 10px;
			transition: all 0.2s;
		}
		.order-item:hover {
			border-color: #409eff;
			background: #f0f9ff;
		}
		.order-info {
			flex: 1;
		}
		.order-number {
			font-weight: 500;
			color: #333;
			margin-bottom: 4px;
		}
		.order-desc {
			font-size: 14px;
			color: #666;
		}
		.order-status {
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
		}
		.status-delivered {
			background: #f0f9ff;
			color: #1890ff;
		}
		.status-shipping {
			background: #fff7e6;
			color: #fa8c16;
		}
		.help-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
		}
		.help-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
		}
		.help-item {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 12px;
			border: 1px solid #e9ecef;
			border-radius: 6px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.help-item:hover {
			border-color: #409eff;
			background: #f0f9ff;
		}
		.help-icon {
			font-size: 20px;
			color: #409eff;
		}
		.help-text {
			font-size: 14px;
			color: #333;
		}
		.return-exchange {
			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		}
		.damage-resend {
			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		}
		.complaint {
			background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		}
		.refund {
			background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="apply-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>售后申请入口</h2>
				<p>退换货、破损补发、投诉等售后服务申请</p>
			</div>

			<!-- 售后统计 -->
			<div class="statistics-panel">
				<h3><i class="el-icon-data-analysis"></i> 售后服务概览</h3>
				<div class="stats-grid">
					<div class="stat-item">
						<div class="stat-number">{{stats.totalOrders}}</div>
						<div class="stat-label">累计订单数</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.afterSalesOrders}}</div>
						<div class="stat-label">售后申请数</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.resolvedRate}}%</div>
						<div class="stat-label">解决率</div>
					</div>
					<div class="stat-item">
						<div class="stat-number">{{stats.avgResponseTime}}</div>
						<div class="stat-label">平均响应时间</div>
					</div>
				</div>
			</div>

			<!-- 售后服务类型 -->
			<div class="service-cards">
				<!-- 退换货申请 -->
				<div class="service-card" @click="applyService('return')">
					<div class="card-header return-exchange">
						<i class="el-icon-refresh-left card-icon"></i>
						<div class="card-title">退换货申请</div>
						<div class="card-desc">商品质量问题、不符合描述、规格错误等</div>
					</div>
					<div class="card-content">
						<ul class="service-features">
							<li><i class="el-icon-check"></i>7天无理由退货</li>
							<li><i class="el-icon-check"></i>15天质量问题换货</li>
							<li><i class="el-icon-check"></i>在线申请快速审核</li>
							<li><i class="el-icon-check"></i>免费上门取件</li>
						</ul>
						<div class="quick-apply">
							<div class="quick-title">常见原因</div>
							<div class="quick-options">
								<span class="quick-option">商品质量问题</span>
								<span class="quick-option">不符合描述</span>
								<span class="quick-option">规格错误</span>
								<span class="quick-option">个人原因</span>
							</div>
						</div>
						<el-button type="primary" style="width: 100%;">立即申请</el-button>
					</div>
				</div>

				<!-- 破损补发申请 -->
				<div class="service-card" @click="applyService('damage')">
					<div class="card-header damage-resend">
						<i class="el-icon-box card-icon"></i>
						<div class="card-title">破损补发申请</div>
						<div class="card-desc">运输过程中商品破损、包装损坏等</div>
					</div>
					<div class="card-content">
						<ul class="service-features">
							<li><i class="el-icon-check"></i>24小时内补发</li>
							<li><i class="el-icon-check"></i>无需退回原商品</li>
							<li><i class="el-icon-check"></i>承担物流责任</li>
							<li><i class="el-icon-check"></i>保价理赔服务</li>
						</ul>
						<div class="quick-apply">
							<div class="quick-title">破损类型</div>
							<div class="quick-options">
								<span class="quick-option">包装破损</span>
								<span class="quick-option">商品破碎</span>
								<span class="quick-option">漏液变质</span>
								<span class="quick-option">冷链断链</span>
							</div>
						</div>
						<el-button type="primary" style="width: 100%;">立即申请</el-button>
					</div>
				</div>

				<!-- 投诉申请 -->
				<div class="service-card" @click="applyService('complaint')">
					<div class="card-header complaint">
						<i class="el-icon-warning card-icon"></i>
						<div class="card-title">投诉申请</div>
						<div class="card-desc">服务态度、配送延误、价格争议等</div>
					</div>
					<div class="card-content">
						<ul class="service-features">
							<li><i class="el-icon-check"></i>专人跟进处理</li>
							<li><i class="el-icon-check"></i>48小时内回复</li>
							<li><i class="el-icon-check"></i>公正透明处理</li>
							<li><i class="el-icon-check"></i>补偿方案协商</li>
						</ul>
						<div class="quick-apply">
							<div class="quick-title">投诉类型</div>
							<div class="quick-options">
								<span class="quick-option">服务态度</span>
								<span class="quick-option">配送延误</span>
								<span class="quick-option">价格争议</span>
								<span class="quick-option">其他问题</span>
							</div>
						</div>
						<el-button type="primary" style="width: 100%;">立即申请</el-button>
					</div>
				</div>

				<!-- 退款申请 -->
				<div class="service-card" @click="applyService('refund')">
					<div class="card-header refund">
						<i class="el-icon-coin card-icon"></i>
						<div class="card-title">退款申请</div>
						<div class="card-desc">取消订单、重复支付、金额错误等</div>
					</div>
					<div class="card-content">
						<ul class="service-features">
							<li><i class="el-icon-check"></i>快速审核退款</li>
							<li><i class="el-icon-check"></i>原路径退回</li>
							<li><i class="el-icon-check"></i>1-3个工作日到账</li>
							<li><i class="el-icon-check"></i>实时进度查询</li>
						</ul>
						<div class="quick-apply">
							<div class="quick-title">退款原因</div>
							<div class="quick-options">
								<span class="quick-option">取消订单</span>
								<span class="quick-option">重复支付</span>
								<span class="quick-option">金额错误</span>
								<span class="quick-option">活动调价</span>
							</div>
						</div>
						<el-button type="primary" style="width: 100%;">立即申请</el-button>
					</div>
				</div>
			</div>

			<!-- 最近订单 -->
			<div class="recent-orders">
				<div class="section-title">
					<i class="el-icon-tickets"></i>
					最近订单（可申请售后）
				</div>
				<div v-for="order in recentOrders" :key="order.id" class="order-item" @click="selectOrder(order)">
					<div class="order-info">
						<div class="order-number">订单号：{{order.orderNumber}}</div>
						<div class="order-desc">{{order.productName}} | {{order.orderDate}}</div>
					</div>
					<div>
						<span :class="['order-status', 'status-' + order.status]">{{order.statusText}}</span>
						<el-button size="small" style="margin-left: 10px;" @click.stop="quickApply(order)">申请售后</el-button>
					</div>
				</div>
			</div>

			<!-- 帮助中心 -->
			<div class="help-section">
				<div class="section-title">
					<i class="el-icon-question"></i>
					常见问题与帮助
				</div>
				<div class="help-grid">
					<div class="help-item" @click="openHelp('policy')">
						<i class="el-icon-document help-icon"></i>
						<span class="help-text">售后政策说明</span>
					</div>
					<div class="help-item" @click="openHelp('process')">
						<i class="el-icon-guide help-icon"></i>
						<span class="help-text">申请流程指南</span>
					</div>
					<div class="help-item" @click="openHelp('time')">
						<i class="el-icon-time help-icon"></i>
						<span class="help-text">处理时效说明</span>
					</div>
					<div class="help-item" @click="openHelp('contact')">
						<i class="el-icon-phone help-icon"></i>
						<span class="help-text">联系客服</span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					stats: {
						totalOrders: 256,
						afterSalesOrders: 18,
						resolvedRate: 96.5,
						avgResponseTime: '2小时'
					},
					recentOrders: [
						{
							id: 1,
							orderNumber: 'YN2024011501',
							productName: '有机小白菜 2kg',
							orderDate: '2024-01-15',
							status: 'delivered',
							statusText: '已送达'
						},
						{
							id: 2,
							orderNumber: 'YN2024011402',
							productName: '澳洲牛排 500g',
							orderDate: '2024-01-14',
							status: 'delivered',
							statusText: '已送达'
						},
						{
							id: 3,
							orderNumber: 'YN2024011303',
							productName: '挪威三文鱼 1kg',
							orderDate: '2024-01-13',
							status: 'shipping',
							statusText: '配送中'
						}
					]
				}
			},
			methods: {
				applyService(type) {
					const typeMap = {
						'return': '退换货',
						'damage': '破损补发',
						'complaint': '投诉',
						'refund': '退款'
					};
					this.$message.success(`进入${typeMap[type]}申请页面`);
					// 实际应用中这里会跳转到对应的申请表单页面
				},
				selectOrder(order) {
					this.$message.info(`选择订单：${order.orderNumber}`);
				},
				quickApply(order) {
					this.$message.success(`为订单 ${order.orderNumber} 申请售后服务`);
					// 实际应用中这里会打开售后申请弹窗，预填订单信息
				},
				openHelp(type) {
					const helpMap = {
						'policy': '售后政策说明',
						'process': '申请流程指南', 
						'time': '处理时效说明',
						'contact': '联系客服'
					};
					this.$message.info(`查看：${helpMap[type]}`);
					// 实际应用中这里会打开对应的帮助页面或弹窗
				}
			}
		});
	</script>
</body>
</html>